<template>
	<div class="container">
		<!--		话题-->
		<div class="topic">
			<div class="topic_name"><span>10w左右的预算怎么装修</span></div>
			<div class="topic_bottom">
				<div class="avator">
					<mu-avatar :size="40">
						<img src="https://forum.alexs.fun/me/user/head1.jpg">
					</mu-avatar>
					<mu-avatar :size="40">
						<img src="https://forum.alexs.fun/me/user/head2.jpg">
					</mu-avatar>
					<mu-avatar :size="40">
						<img src="https://forum.alexs.fun/me/user/timg.jpg">
					</mu-avatar>
				</div>
				<span class="num">1.5万人热聊</span>
			</div>
		</div>
		<!--		信息主体-->
		<div class="main">
			<infomation :name="item.name" :avatar="item.avatar" :info="item.info" :is-me="item.isMe"
									v-for="(item, key) in infomations" :key="key">
			</infomation>
		</div>

		<!--		尾部发言眶-->
		<div class="foot">
			<div class="my-input-div">
				<div class="my-inline-item my-icon">
					<img src="https://forum.alexs.fun/me/yuyin.png">
				</div>
				<label>
					<input class="my-inline-item" type="text" placeholder="请说点什么吧~" v-model="Sms">
				</label>
				<mu-container class="button-wrapper">
					<mu-flex justify-content="center" align-items="center">
						<mu-button round color="rgb(115,209,189)" @click="sendEms">发送</mu-button>
					</mu-flex>
				</mu-container>
			</div>
		</div>
	</div>
</template>

<script>
import Infomation from "./Infomation";
export default {
	props: {
		mine: Object,
	},
	name: "Message",
	components: {Infomation},
	data() {
		return {
			infomations: [
				{avatar: 'https://forum.alexs.fun/me/user/head1.jpg', name: '蓦然回首', isMe: true, info: '这实在是太贵了'},
				{avatar: 'https://forum.alexs.fun/me/user/head2.jpg', name: 'Cathy', isMe: false, info: '十万元或许可以'},
				{avatar: 'https://forum.alexs.fun/me/user/timg.jpg', name: 'Tkesl', isMe: false, info: '十万元或许可以'},
				{avatar: 'https://forum.alexs.fun/me/user/head3.jpg', name: 'Slcin', isMe: false, info: '十万元或许可以'},
				{avatar: 'https://forum.alexs.fun/me/user/head4.jpg', name: 'Cacf', isMe: false, info: '十万元或许可以'},
				{avatar: 'https://forum.alexs.fun/me/user/timg.jpg', name: 'Cacf', isMe: false, info: '十万元或许可以'},
				{avatar: 'https://forum.alexs.fun/me/user/head2.jpg', name: '蓦然回首', isMe: true, info: '十万元或许可以'},
			],
			users: [
				{avatar: 'https://forum.alexs.fun/me/user/timg.jpg', name: 'Cathy'},
				{avatar: 'https://forum.alexs.fun/me/user/head3.jpg', name: 'Tkesl'},
				{avatar: 'https://forum.alexs.fun/me/user/head4.jpg', name: 'Slcin'},
				{avatar: 'https://forum.alexs.fun/me/user/timg.jpg', name: 'Cacf'}
			],
			reply: ['你说的对', '11万可能哦都不过', '现在装修太坑', '钱是小事情'],
			Sms: ''
		}
	},
	methods: {
		sendEms: function () {
			var msg = this.Sms;
			var kid = {avatar: this.mine.avatar, name: this.mine.name, isMe: true, info: msg};
			var index = this.getRandomInt(0, 3);
			console.log(index);
			var reply = {
				avatar: this.users[index].avatar,
				name: this.users[index].name,
				isMe: false,
				info: this.reply[index]
			};
			this.infomations.push(kid);
			this.infomations.push(reply);
			this.Sms = "";
		},
		getRandomInt(min, max) {
			// 以下函数返回 min（包含）～ max（包含）之间的数字：
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}
	}
}
</script>

<style scoped>
	.container {
		width: 100%;
		background: white;
	}
	/*主题*/
	.topic {
		height: 115px;
		background: rgb(101, 130, 247);
		margin: 10px 20px;
		border-radius: 25px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.topic .topic_name {
		width: 100%;
		height: 50%;
	}
	.topic_name span {
		font-size: 20px;
		color: white;
		text-align: left;
		position: absolute;
		left: 5px;
		top: 11px;
	}
	.topic_bottom {
		width: 90%;
		margin-left: -5px;
	}
	.topic_bottom .avator {
		float: left;
	}
	.topic_bottom span {
		font-size: 10px;
		color: rgb(224, 226, 247);
		float: right;
		margin-top: 20px;
	}
	/*/信息主题/*/
	.main {
		width: 100%;
		height: auto;
		margin-top: 40px;
		border: 1px;
		display: flex;
		flex-direction: column;
	}
	/*尾部固定框*/
	.foot {
		height: 100%;
		width: 100%;
		display: flex;
		position: sticky;
		bottom: 0;
		align-items: center;
		justify-content: center;
	}
	.my-input-div {
		width: 100%;
		background-color: white;
		height: 60px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		box-shadow: 0 -1px 5px #DFDFDF;
	}
	.my-inline-item {
		display: inline-block;
		background-color: #F4F4F4;
		width: 200px;
	}
	.my-icon, .my-scan {
		height: 50px;
		font-size: 35px;
	}
	.my-icon {
		border-radius: 50% 0 0 50%;
	}
	.my-scan {
		border-radius: 0 50% 50% 0;
	}
	input {
		background-color: gray;
		border: none;
		font-size: 16px;
		line-height: 50px;
		height: 50px;
		width: 100%;
	}
	.button-wrapper {
		text-align: center;
	}

</style>